<style scoped="scoped">
  .label-content-box {
    float: left;
    margin: 15px 15px;
  }
</style>
<template>
  <div>
    <el-dialog
      title="标签打印"
      width="860px"
      :visible.sync="showModal"
    >
      <div style="line-height: 20px;color: #FF8800;padding-left: 12px">以下为打印样例，最终打印按所选择订单的实际总包件为准！</div>
      <div v-for="(item, index) in computedPrintData" :key="index" v-show="index < 1">
        <div class="label-content-box" v-for="(v, vIndex) in item.labelPrintPackageBeanListCopy" :key="vIndex" v-show="vIndex < 3">
          <table style="border-collapse: collapse;width: 380px;height: 290px">
            <tr>
              <td colspan="4" :style="tableTd">{{item.companyName}}</td>
            </tr>
            <!--width:70、60、60、110-->
            <!--storageTypeCode:CARGOSOURCETYPE01(长期仓储)、CARGOSOURCETYPE02(快进快出)-->
            <tr v-if="item.storageTypeCode == 'CARGOSOURCETYPE02'">
              <td :style="tableTd" width="70px">订单号</td>
              <td :style="tableTd" width="120px" colspan="2">
                <span class="orderNo" :name="item.orderNo">{{item.orderNo}}</span>
              </td>
              <td :style="tableTd" width="130px">{{item.labelPrintPackageBeanListCopy.length}}-{{vIndex + 1}}</td>
            </tr>
            <tr v-if="item.storageTypeCode == 'CARGOSOURCETYPE01'">
              <td :style="tableTd" width="70px">订单号</td>
              <td :style="tableTd" width="250px" colspan="3">
                <span class="orderNo" :name="item.orderNo">{{item.orderNo}}</span>
              </td>
            </tr>
            <tr>
              <td :style="tableTd">{{(item.storageTypeCode == 'CARGOSOURCETYPE01') ? '仓库名称' : '始发地'}}</td>
              <td :style="tableTd" colspan="3">{{item.warehouse}}({{item.warehouseProvince}}{{item.warehouseCity}}{{item.warehouseDistrict}})</td>
            </tr>
            <tr v-if="item.storageTypeCode == 'CARGOSOURCETYPE02'">
              <td :style="tableTd">目的地</td>
              <td :style="tableTd" colspan="3">{{item.consigneProvince}} {{item.consigneCity}} {{item.consigneDistrict}}</td>
            </tr>
            <tr v-if="item.storageTypeCode == 'CARGOSOURCETYPE01'">
              <td :style="tableTd1">厂家名称</td>
              <td :style="tableTd1" colspan="3">{{v.manufacturersName}}</td>
            </tr>
            <tr>
              <td :style="tableTd1" width="70px">商家名称</td>
              <td :style="tableTd1" width="120px" colspan="2">{{item.cargoOwnerName}}</td>
              <!--二维码-->
              <td :style="tableTd1" width="130px" rowspan="3"></td>
            </tr>
            <tr v-if="item.storageTypeCode == 'CARGOSOURCETYPE02'">
              <td :style="tableTd1">客户信息</td>
              <td :style="tableTd1" colspan="2">{{item.companyManager}} 转 {{item.consigneName}}</td>
            </tr>
            <tr v-if="item.storageTypeCode == 'CARGOSOURCETYPE01'">
              <td :style="tableTd1">包件名称</td>
              <td :style="tableTd1" colspan="2">{{v.packageName}}</td>
            </tr>
            <tr v-if="item.storageTypeCode == 'CARGOSOURCETYPE02'">
              <td :style="tableTd1">客户电话</td>
              <td :style="tableTd1" colspan="2">{{item.consignePhone}}</td>
            </tr>
            <tr v-if="item.storageTypeCode == 'CARGOSOURCETYPE01'">
              <td :style="tableTd1">包件编号</td>
              <td :style="tableTd1" colspan="2">
                <span class="packageNo" :name="v.packageNo">{{v.packageNo}}</span>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="clearfix"></div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="hide">取 消</el-button>
    <el-button type="primary" @click="print()">打 印</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {getLodop, validateLODOP, copy} from '@/utils'
let LODOP = null
export default {
  name: 'labelModal',
  props: {
    printData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      showModal: false,
      tableTd: 'text-align: center;border: 1px solid #999;font-size:15px;padding: 1px;height: 39px;',
      tableTd1: 'text-align: center;border: 1px solid #999;font-size:15px;padding: 1px;height: 42px;'
    }
  },
  created() {
    getLodop().then(result => {
      LODOP = result
    })
  },
  computed: {
    computedPrintData() {
      let copyPrintData = copy(this.printData, true)
      copyPrintData.map(item => {
        if (item.boolTrunk) {
          item.labelPrintPackageBeanListCopy = []
          for (let i = 0; i < item.totalPackage; i++) {
            item.labelPrintPackageBeanListCopy.push({})
          }
        } else {
          item.labelPrintPackageBeanListCopy = []
          item.labelPrintPackageBeanList.map(v => {
            for (let i = 0; i < v.packageNum; i++) {
              item.labelPrintPackageBeanListCopy.push(v)
            }
          })
        }
      })
      console.log('copyPrintData', copyPrintData)
      return copyPrintData
    }
  },
  methods: {
    show() {
      this.showModal = true
    },
    hide() {
      this.showModal = false
    },
    print() {
      if (validateLODOP(LODOP)) {
        $(this.$el).find('.label-content-box').each((index, v) => {
          let orderNo = $(v).find('.orderNo').attr('name')
          let packageNo = $(v).find('.packageNo').attr('name')
          let printText = v.innerHTML
          let QRCodeData = {}
          QRCodeData.orderNo = orderNo
          QRCodeData.packageNo = packageNo
          console.log('QRCodeData', QRCodeData)
          LODOP.ADD_PRINT_TABLE('1.5mm', '1mm', '98mm', '77mm', printText)
          LODOP.ADD_PRINT_BARCODE('164px', '250px', '145px', '140px', 'QRCode', JSON.stringify(QRCodeData))
          // LODOP.SET_PRINT_STYLEA(0, 'QRCodeVersion', 1)
          // LODOP.ADD_PRINT_BARCODE('16px', '147px', '227px', '43px', 'EAN128A', packageCode) // 一维码
          // LODOP.SET_PRINT_STYLEA(0, 'ShowBarText', 0) // 控制一维码的编号自动限制
          LODOP.NewPage()
        })
        LODOP.SET_PREVIEW_WINDOW(1, 0, 0, '900px', '600px', '') // 设置打印预览窗口的大小
        LODOP.SET_LICENSES('成都居家通物流有限责任公司', 'B54155199971EA1DB53ED53340530EFE', '', '')
        // LODOP.PRINT_DESIGN()
        this.hide()
        LODOP.PREVIEW()
        this.labelRecord()
      }
    },
    labelRecord() {
      let idArr = []
      this.printData.forEach(item => {
        idArr.push(item.orderId)
      })
      this.$ajax.post('/ms-terminal-order/labelPrint/modifyPrintLog', {idList: idArr}).then(response => {
        this.$emit('refresh')
      })
    }
  }
}
</script>
